<template>
  <div class="PersonMes">
    <el-table :data="evaluateData" stripe style="width: 100%" height="485" v-if="currentTab === '2-1'">
      <el-table-column prop="evaluation_id" label="订单号" align="center" />
      <el-table-column label="商品信息" align="center" >
        <template slot-scope="scope">
          <img :src="scope.row.evaluation_goodsid" alt="">
          <span @click="handleGoDetail(scope.row.evaluation_goodsid)" class="goto">
            {{scope.row.evaluation_goodsid}}
          </span>
        </template>
      </el-table-column>
      <el-table-column prop="evaluation_description" label="商品评星" align="center">
        <template slot-scope="scope">
          {{scope.row.evaluation_description}}星
        </template>
      </el-table-column>
      <el-table-column prop="evaluation_shopid" label="店家" align="center" >
        <template slot-scope="scope">
          <span @click="handleGoshop(scope.row.evaluation_shopid)" class="goto">
            {{scope.row.evaluation_shopid}}
          </span>
        </template>
      </el-table-column>
      <el-table-column  prop="evaluation_service" label="店家评星" align="center">
        <template slot-scope="scope">
          {{scope.row.evaluation_service}}星
        </template>
      </el-table-column>
      <el-table-column prop="evaluation_content" label="评价内容" align="center" show-overflow-tooltip min-width="250"/>
      <el-table-column  prop="evaluation_time" label="评价时间" align="center" show-overflow-tooltip min-width="150"/>
    </el-table>
    <el-table :data="collectData" stripe style="width: 100%" height="500" v-else-if="currentTab === '2-2'">
      <el-table-column prop="orderId" label="收藏内容" align="center" min-width="150" />
      <el-table-column prop="evaluate" label="收藏消息" align="center" />
      <el-table-column prop="content" label="评价内容" align="center" min-width="250" show-overflow-tooltip />
      <el-table-column label="查看详情" align="center">
        <template slot-scope="scope">
          <div class="firstColumn">
            <el-button @click="handleModalOpen(scope.row)">查看详情</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-table :data="personalData" stripe style="width: 100%" height="500" v-else-if="currentTab === '2-3'">
      <el-table-column prop="orderId" label="订单号" align="center" min-width="150" />
      <el-table-column prop="evaluate" label="评价" align="center" />
      <el-table-column prop="content" label="评价内容" align="center" min-width="250" show-overflow-tooltip />
      <el-table-column label="查看详情" align="center">
        <template slot-scope="scope">
          <div class="firstColumn">
            <el-button @click="handleModalOpen(scope.row)">查看详情</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <Pagination v-if="personalReload" :pagination="evaPagination" :numChange="handlePaginate"/>
    </div>
    <evaluate-modal :visible="visible" @close="handleModalClose" :currenttRow="currenttRow" />
  </div>
</template>

<script>
import Pagination from '@/components/Pagination';
import EvaluateModal from './EvaluateModal';
import { mapState, mapActions } from 'vuex';
export default {
  name: '',
  components: {
    Pagination,
    EvaluateModal
  },
  props: {
    currentTab: {
      type: String,
      default: '2-1'
    }
  },
  computed: {
    ...mapState({
      userInfo: state => state.user.userInfo,
      evaluateData: state => state.message.evaluateData,
      evaPagination: state => state.message.evaPagination,
      personalReload: state => state.message.personalReload,
      collectData: state => state.message.collectData,
      personalData: state => state.message.personalData,
      login: state => state.user.login
    }),
  },
  data () {
    return {
      currenttRow: null,
      visible: false
    };
  },
  created(){
    this.fetchEvaluations({
      evaluation_userid: this.login ? this.userInfo.user_id : JSON.parse(localStorage.userInfo).user_id ,
      pn: this.evaPagination.pageNum,
      pageSize: this.evaPagination.pageSize
    });
  },
  methods: {
    ...mapActions(['fetchEvaluations']),
    handleModalClose () {
      this.visible = false;
    },
    handleGoshop(shop_id){
      this.$router.push({
        name: 'Shop',
        query: {
          shop_id
        }
      });
    },
    handleGoDetail(goods_id){
      this.$router.push({
        name: 'Detail',
        query: {
          goods_id
        }
      });
    },
    handlePaginate(num){
      this.fetchEvaluations({
        evaluation_userid: this.userInfo.user_id,
        pn: num,
        pageSize: this.evaPagination.pageSize
      });
    },
  },
}
</script>
<style lang='scss' scoped src="../index.scss"/>
<style lang="scss">
.PersonMes{
  .firstColumn {
    button {
      padding: 7px 12px !important;
    }
  }
  .el-table__body-wrapper{
    .el-table__body{
      tbody{
        tr{
          td{
            &:nth-child(1){
              text-align: center!important;
            }
          }
        }
      }
    }
  }

}
</style>